• 0

css rollover image menu


Question

hey everyone, i will be the first to admit im not very good at CSS, it has been about 1.5 years since i even touched the stuff last. so i did some searching around the net and came up with the following:

i have these images:

post-31002-1203433990.png THIS IS PHOTOS.PNG

post-31002-1203433913_thumb.png THIS IS MENU.PNG

there are more menu options than that. ok so i have this code:

in header.php:

<div id="topmenu" >
	<ul>
		<li id="main"><a href="/"><span><em>Main</em></span></a></li>
	</ul>
</div>

in CSS:

#topmenu { 
	height:23px; 
	background-image:url(images/menu/menu.png); 
	}

#topmenu ul { 
	list-style:none; 
	margin:0; 
	padding:0 10px;  
	}

#topmenu li { 
	float:left; 
	}

#topmenu li a span, #topmenu li a em { 
	display:none; 
	}

#topmenu li a { 
	display:block; 
	height:23px; 
	width:100px; 
	background-position:center top; 
	}

#topmenu li a:hover span { 
	display: block; 
	width:100px; 
	height:23px; 
	top:-23px; 
	background-position:center bottom; 
	}

#topmenu li#photos a, #topmenu li#photos a:hover span { 
	background-image:url(images/menu/photos.png); 
	}

and this is the problem i'm getting:

post-31002-1203434021.png

As you can see they are doubling up on top of each other. So my question is, how can i remove the normal state of the menu item. I don't want to use solid colour background for the menu items as i have made many picture/colour themes for this blog depending on events and seasons in Japan. I'm hoping this is really simple. I don't even know where to start to find an answer to this as i got this code from a how-to. sorry for trouble ><

Edited by fukachu
Link to comment
https://www.neowin.net/forum/topic/620791-css-rollover-image-menu/
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Your CSS seems to be, at the very least, partially incomplete because the last bit of code is missing the closing }, but I'm sure that you just didn't include it.

Which of the two images is main.png? I'm not seeing where the second image (main2.png?) is put in by the CSS either. Is this page accessible for us to see?

I like to refer people to this page for CSS rollovers (which can help you in two ways, with the rollover and with no preloading).

  • 0

thank you for your reply, sorry that i didn't give everything correcly. I have named the images above and i have fixed the code to reflect the images better at the last minute i changed the image from main to photos as that particular one showed the problem more clearly but if forgot to edit the code in this post.

you can view the site here\ it is very simple default wordpress layout with some graphical changes and the menu. obviously not complete but wanting to get this menu nailed before i move on.

as for the website you linked to. i tried using that sites information once before and i must have been doing something wrong. 1.5 years ago i had a hell of a time getting everything to look the same in the menu in firefox/safari/ie even though it is meant to be compatible. so i looked elsewhere this time. also with the example you show there, it might still have the original yellow image showing but simply being covered up by the brown and black image sections.

what i need is for the regular state image, the smaller version of photos, to disappear when in hover state so that it doesn't appear behind the larger, hover state image of photos.

the reason for this is the themes i will have as you can see below will be changed every few weeks to reflect what is going on in Japan: it makes my life easier if i can have the menu without putting the colour backgrounds in. then if i want to add new menu items down the track, which is more than likely, i can just make one image with the text rather than as many as 20 (when finished making all the themes)

post-31002-1203463705_thumb.jpg

Edited by fukachu
  • 0

Alrighty, I saw this at first and confirmed that it's the problem: you're setting the background for both the anchor and span. Remove all references to applying a background to the span, and remove span from #topmenu li a:hover span { }

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Dead By Daylight and three more games join Xbox Free Play Days this weekend by Pulasthi Ariyasinghe As the weekend approaches, Microsoft has brought along another Free Play Days promotion for Game Pass subscribers to jump into. This time, Dead by Daylight, Headbangers: Rhythm Royale, Trailmakers, and Synduality Echo of Ada are all available for Xbox Game Pass Ultimate, Standard, and Core members for no extra cost. As always, any progress made during the weekend also carries over automatically if you decide to purchase a game afterward. From the four games available, Dead by Daylight should be the most familiar to most gamers. The multiplayer four-versus-one asymmetric survival horror game has you assuming the roles of survivors or the killer to see who can come out on top. Next, Headbangers: Rhythm Royale lands as a light-hearted, rhythm-based battle royale game. Up to 30 players can be in a single round, all represented as pigeons, before various mini-games involving increasingly difficult rhythm challenges get thrown at the group. The last remaining pigeon becomes the "Master Headbanger." Meanwhile, Trailmakers is a popular sandbox experience where you and your friends construct physics-based vehicles. A wide range of modular parts are offered for making these vehicles, with an exploration element also adding more options to search for. Adventure, sandbox, and racing modes arrive as options for playing either solo or in multiplayer. Lastly, the Synduality Echo of Ada is a sci-fi extraction shooter experience where you control mechs as you search for loot while fighting AI and other players. Here are the store links for the announced titles and their supported platforms: Dead by Daylight - $11.99 (Xbox Series X|S, Xbox One) Headbangers: Rhythm Royale - $3.99 (Xbox Series X|S, Xbox One, PC) Trailmakers - $14.99 (Xbox Series X|S, Xbox One, PC) SYNDUALITY Echo of Ada - $29.99 (Xbox Series X|S) This Free Play Days promotion will end on Sunday, June 22, at 11:59 pm PT. Following this, expect another round of games to enter the program next Thursday, June 26.
    • I'm not simping, I'm telling it how it is. This is the norm and has been forever. Profits need to keep growing, it doesn't matter if you are valued at a trillion or a million. As long as you are part of public trading that's the name of the game. If it's cheaper for the company to outsource, they will, and you'll get laid off. Welcome to capitalism 101. Like I said, the problem is the system itself.
    • Samsung may offer Galaxy AI free for life on the Galaxy Z Fold7, Z Flip7, and Z Flip7 FE by Sagar Naresh Bhavsar Samsung is all set to unveil its latest foldables: the Galaxy Z Fold7, Z Flip7, the affordable Z Flip7 FE, along with the Galaxy Watch8 series at the Unpacked event, possibly in New York City. The Galaxy Z Fold7 is expected to be the thinnest book-style foldable from the company, while the Galaxy Z Flip7 is tipped to come with a full-screen cover display. These devices are almost confirmed to launch with Android 16-based One UI 8 out of the box, the beta of which is already live for the Galaxy S25 series. Samsung is also expected to give a glimpse of its first XR headset, the Galaxy XR, dubbed "Project Moohan," at the event. However, there may be something more exciting coming for upcoming foldable fans. A reliable leaker, PandaFlashPro on X, has tipped that you might get all Galaxy AI features for free for life with the upcoming Galaxy Z Flip7 and Galaxy Z Fold7. Notably, Galaxy AI will also reportedly be permanently free on the affordable Galaxy Z Flip7 FE. The leaker also claimed that the Galaxy Z Fold7, Z Flip7, and Z Flip7 FE will also come with Gemini Advanced plus 2TB of cloud storage, free for six months. This is similar to theoffer that Samsung offered the Galaxy S25 series earlier this year. However, the company cleared the air that the Galaxy AI features on the Galaxy S25 series will be free till the end of 2025, after which a subscription-based model will be introduced. If true, then you will be able to enjoy Galaxy AI features such as Sketch to Image, Generative Image, Note Assist, Live Translate, Interpreter, Chat Assist, etc., free for a lifetime on the upcoming foldables, setting it apart from its competitors.
    • Summary for all: Some WD SSDs need firmware updates for 24H2.
    • Next-gen AMD GPUs reported to support HDMI 2.2 with up to 80Gbit/s bandwidth by Aditya Tiwari Some beans have spilled around AMD's rumored upgrades for its next-generation graphics architecture. The American silicon giant is expected to support up to 80 Gbps mode on HDMI 2.2 for its upcoming graphics architecture, internally codenamed GFX13, and expected to launch as RDNA 5 or UDNA. The latest information comes from the leaker @Kepler_L2, who took to their social media account on X (via VideoCardz). It strengthens the hopes of the latest HDMI standard and support for faster bandwidth making their way to the next generation of AMD GPUs. The HDMI 2.2 standard was announced earlier this year and released to manufacturers in the first half of 2025. It pushes the maximum allowed bit rate to 96 Gbps and supports Latency Indication Protocol (LIP) to improve audio and video synchronization. However, according to Kepler's post, RDNA 5 GPUs are expected to support only 64 Gbps and 80 Gbps modes. This suggests that the 96 Gbps mode may not be supported on the new architecture, while it remains unclear whether this is due to some hardware limitation or will be added later. Although the new piece of information pertains to GFX13, it doesn't clarify whether it's related to the PRO or Radeon RX series. The company has previously used UHBR 13.5 (54 Gbps) for its consumer-focused GPUs to reduce costs while supporting UHBR 20 (80 Gbps) on PRO cards, according to the leaker. It remains to be seen whether AMD treats the two product lines the same or differently. Another standard announced earlier this year was DisplayPort 2.1b, which keeps the same maximum bandwidth of 80 Gbps but supports three times the cable length for UHBR20 GPU-to-display connections compared to existing VESA-certified DP80 passive cables. The new standard is supported on NVIDIA's RTX 50 and RTX PRO Blackwell series GPUs. For now, there is no update on whether AMD will bring DisplayPort 2.1b support to the GFX13 architecture.
  • Recent Achievements

    • First Post
      MikeK13 earned a badge
      First Post
    • One Month Later
      OHI Accounting earned a badge
      One Month Later
    • Week One Done
      OHI Accounting earned a badge
      Week One Done
    • First Post
      Thornskade earned a badge
      First Post
    • Week One Done
      Higante88 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      709
    2. 2
      ATLien_0
      269
    3. 3
      Michael Scrip
      202
    4. 4
      +FloatingFatMan
      178
    5. 5
      Steven P.
      129
  • Tell a friend

    Love Neowin? Tell a friend!